<template>
	<view class="content">
		<image class="logo" src="/static/ic_header.png" />
		<view class="menu_item_div">
			<view class="et_div">
				<view class="menu_txt">账号:</view>
				<input class="et" placeholder="请输入账号" maxlength="15" v-model="phone" @input="onInput($event,1)" />
			</view>
		</view>

		<view class="menu_item_div">
			<view class="et_div">
				<view class="menu_txt">密码:</view>
				<input class="et" placeholder="请输入密码" password maxlength="20" v-model="password" @input="onInput($event,2)" />
			</view>
		</view>

		<view class="btn_ok" @click.stop="onOk">登录</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
			}
		},

		onLoad() {

			if (uni.getStorageSync('admininfo')) {
				// console.log('登录页面检测到用户信息,跳转到首页');
				uni.switchTab({ url: '/pages/index/index' })
			}

		},

		methods: {
			onInput(e, type) {
				// console.log('输入的e = ', e);
				// console.log('输入的type = ', type);
			},
			onOk() {
				let that = this
				let phone = that.phone
				let password = that.password

				if (!phone) {
					uni.showToast({ title: '请输入账号', icon: 'none' })
					return
				}
				if (!password) {
					uni.showToast({ title: '请输入密码', icon: 'none' })
					return
				}

				uni.showModal({
					title: '提示',
					content: '是否提交登录信息？',
					success: res => {
						if (res.confirm) {
							that.reqLogin()
						}
					}
				})
			},

			// 接口:验证码登录
			async reqLogin() {
				let that = this

				let account = that.phone
				let password = that.password
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$login({ account, password })
				uni.showToast({ title: msg, icon: 'none' })
				// console.log(`reqLogin...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					// 登录成功
					uni.setStorageSync('admininfo', JSON.stringify(data.userinfo))
					uni.switchTab({ url: '/pages/index/index' })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}

			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 180rpx;
		width: 180rpx;
		margin: 200rpx auto 100rpx auto;
	}

	.menu_item_div {
		display: flex;
		align-items: center;
		margin: 40rpx 0 0 0;
	}

	.menu_txt {
		width: 180rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.et_div {
		display: flex;
		align-items: center;
		border: solid 1rpx rgba(1, 1, 1, 0.15);
		width: 500rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 888rpx;
		/* background-color: white; */
	}

	.et {
		font-size: 28rpx;
	}

	.btn_ok {
		background-color: deepskyblue;
		width: 500rpx;
		height: 66rpx;
		line-height: 66rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 40rpx 0 0 0;
		border-radius: 888rpx;
	}
</style>